<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				background: #f5f5f5;
				color: #333333;
			}

			.main {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.nav {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				background: white;
			}

			.nav .navLi {
				width: 25%;
				text-align: center;
				padding: 3.2vw 0;
			}

			.state {
				color: #FF4443;
				border-bottom: 1px solid #FF4443;
			}

			.content {
				width: 93%;
				margin-top: 3.2vw;
			}

			.content .list {
				padding: 3.2vw;
				display: flex;
				background: white;
				flex-direction: row;
				align-items: center;
				margin-bottom: 3.2vw;
			}

			.content .list>div:nth-child(2) {
				flex: 1;
			}

			.content .list>div:nth-child(2)>div:nth-child(1) {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.content .list>div:nth-child(2)>div:nth-child(2) {
				font-size: 3.2vw;
				color: #999999;
				margin-top: 1vw;
			}

			.content .list>div:nth-child(2)>div:nth-child(3) {
				color: #39B54A;
				margin-top: 2vw;
			}

			/* 图片自适应 */
			.jfK1 {
				width: 28%;
				overflow: hidden;
				position: relative;
				margin-right: 3.2vw;
			}

			.jfK1 .jfImg1 {
				width: 100%;
				height: 100%;
				padding-top: 100%;
				overflow: hidden;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-background-size: cover;
				-moz-background-size: cover;
			}
			.move{
				color: #999999;
				padding: 3vw;
				font-size: 3.2vw;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="nav">
				<div class="navLi state" deta-state='0'>未领取</div>
				<div class="navLi" deta-state='1'>未使用</div>
				<div class="navLi" deta-state='2'>已使用</div>
				<div class="navLi" deta-state='3'>已过期</div>
			</div>
			<script type="text/html" id="content">
				{{each}}
					<div class="list">
						<div class='jfK1'>
							<div class='jfImg1' style="background-image: url({{$value.fileUrl}})"></div>
						</div>
						<div>
							<div>{{$value.productName}}</div>
							<div>{{$value.availableBeginTime}} 到 {{$value.availableEndTime}}</div>
							<div>{{$value.createdTime}}</div>
						</div>
					</div>
				{{/each}}
			</script>
			<div class="content"></div>
			<div class="move">查看更多</div>
			<!-- <div class="content">
				<div class="list">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div>
						<div>商品名称</div>
						<div>2021-04-20 10:22:22 到 2021-04-20 10:22:22</div>
						<div>2021-04-20 10:22:22</div>
					</div>
				</div>
				<div class="list">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div>
						<div>商品名称</div>
						<div>2021-04-20 10:22:22 到 2021-04-20 10:22:22</div>
						<div>2021-04-20 10:22:22</div>
					</div>
				</div>
			</div> -->
		</div>
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		$(function() {
			var state = 0,
				pageNum = 1,
				pageSize = 10,
				list,hasNextPage
			if (sessionStorage.getItem('token')) {
				myAjax('get', '/api/alipay/myCoupon', {
					status: state,
					pageNum: pageNum,
					pageSize: pageSize
				}, function(res) {
					if (res.code == 200) {
						list=res.data.list
						var html = template('content', res.data.list);
						$(".content").append(html);
						hasNextPage = res.data.hasNextPage
						pageNum=2
						if(res.data.hasNextPage){
							$('.move').show()
						}else{
							$('.move').hide()
						}
					} else {
						alert(res.data)
					}
				})
			} else {
				alert('非法操作')
			}
			$('.navLi').on('click', function() {
				var that = this
				if (!$(this).hasClass("state")) {
					//alert('1')
					$(this).addClass("state")
					$(this).siblings().removeClass("state")
					//console.log($(this).attr('deta-state'))
					myAjax('get', '/api/alipay/myCoupon', {
						status: $(this).attr('deta-state'),
						pageNum: 1,
						pageSize: pageSize
					}, function(res) {
						if (res.code == 200) {
							list = res.data.list
							var html = template('content', list);
							$(".content").html(html);
							state = $(that).attr('deta-state')
							hasNextPage = res.data.hasNextPage
							pageNum=2
							if(res.data.hasNextPage){
								$('.move').show()
							}else{
								$('.move').hide()
							}
						} else {
							alert(res.data)
						}
					})
				}
			})
			// $('.main').on('click', '.list', function() {
			// 	if (state == 1) {
			// 		window.location.href = "alipays://platformapi/startapp?appId=20000021&a=lb&b=c";
			// 	}
			// })
			$('.move').on('click',function(){
				if (hasNextPage) {
					myAjax('get','/api/alipay/myCoupon',{status: state,pageNum:pageNum,pageSize:pageSize},function(res){
						if(res.code==200){
							//dataJson['data']=res.data[0].productList
							//console.log(list)
							var list1 = list.concat(res.data.list)
							list=list1
							//console.log(list)
							var html = template('content',list);
							
							$(".content").html(html);
							hasNextPage=res.data.hasNextPage
							pageNum++
							if(res.data.hasNextPage){
								$('.move').show()
							}else{
								$('.move').hide()
							}
						}else{
							alert(res.data)
						}
					})
				}else{
					alert('没有更多数据')
				}
				
			})
		})
	</script>
</html>
